<template>
  <div class="left-bar">
    <div class="bar-title">
      <span>居民档案管理系统</span>
    </div>
    <el-menu :default-active="'/' + $route.path.split('/')[1]" mode="vertical" theme="dark"
             unique-opened router>
      <el-menu-item-group title="首页">
        <el-menu-item index="/"><i class="fa fa-bar-chart"></i>全局统计</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="居民管理">
        <el-menu-item index="/user"><i class="fa fa-circle"></i>居民录入</el-menu-item>
        <el-menu-item index="/user/manage"><i class="fa fa-exchange"></i>居民列表</el-menu-item>
        <el-menu-item index="/user/view"><i class="fa fa-plug"></i>信息概览</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="组别信息">
        <el-menu-item index="/tag"><i class="fa fa-cubes"></i>分类管理</el-menu-item>
        <el-menu-item index="/allowance"><i class="fa fa-cubes"></i>补助管理</el-menu-item>
        <el-menu-item index="/family"><i class="fa fa-cubes"></i>家庭管理</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="系统管理">
        <el-menu-item index="/admin"><i class="fa fa-user-o"></i>管理员信息</el-menu-item>
        <el-menu-item index="/history"><i class="fa fa-history"></i>操作记录</el-menu-item>
        <el-menu-item index="/about"><i class="fa fa-cloud"></i>关于系统</el-menu-item>
      </el-menu-item-group>
    </el-menu>
    <div title="退出登录" class="bar-footer">
      <el-tooltip effect="dark" content="修改信息" placement="top-start">
        <span @click="edit(false)">{{ user.username }} </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="退出登录" placement="top-start">
        <i class="fa fa-sign-out" @click="logout"></i>
      </el-tooltip>
    </div>
    <!-- 信息修改对话框 -->
    <el-dialog title="管理员信息修改" :visible.sync="editInfo" :modal="false"
               @keyup.enter.native="edit(true)">
      <el-form :model="admin">
        <el-form-item label="用户名">
          <el-input :disabled="true" v-model="admin.username" size="small"></el-input>
        </el-form-item>
        <el-form-item label="原密码">
          <el-input v-model="admin.password" size="small" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="admin.newPassword" size="small" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="admin.repeatPassword" size="small" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="edit(true)" size="small" :disabled="loading">
          {{ loading ? '修改中...' : '修 改' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import {mapActions} from 'vuex'
  import {httpPut} from '../util/api'

  export default {
    name: 'left-bar',
    data() {
      return {
        loading: false,
        editInfo: false,
        user: {
          username: '',
        },
        admin: {
          username: '',
          password: '',
          repeatPassword: '',
          newPassword: '',
        },
      }
    },
    created() {
      this.init()
    },
    methods: {
      ...mapActions(['USER_LOGOUT']),
      init() {
        this.user = this.$store.state.user.user
        this.admin.username = this.user.username
      },
      logout() {
        this.USER_LOGOUT(),
          this.$router.push({ path: '/login' })
      },
      edit(flag = false) {
        if (flag) {
          if (this.admin.username && this.admin.password) {
            if (this.admin.newPassword !== this.admin.repeatPassword) {
              this.$message.error('前后密码不一致')
              this.admin.password = ''
              this.admin.newPassword = ''
              this.admin.repeatPassword = ''
            } else {
              this.loading = true
              this.admin.password = this.solt(this.admin.password.trim())
              this.admin.newPassword = this.solt(this.admin.newPassword.trim())
              delete this.admin.repeatPassword
              httpPut('/admin', this.admin).then((response) => {
                if (response.status === 200) {
                  this.$message.success(response.data.msg || '更新成功')
                  this.logout()
                  this.editInfo = false
                }
                this.loading = false
                this.reset()
              }).catch()
              {
                this.reset()
                this.loading = false
              }
            }
          } else {
            this.$message.error('密码不能为空')
          }
        } else {
          this.editInfo = true
          this.reset()
        }
      },
      reset() {
        this.admin.repeatPassword = ''
        this.admin.password = ''
        this.admin.newPassword = ''
      },
    },
  }
</script>


<style lang="scss">
  @import '../scss/theme';

  .left-bar {
    width: 200px;
    position: fixed;
    top: 60px;
    padding: 10px 0;
    bottom: 60px;
    z-index: 1000;
    overflow-y: auto;
    background-color: $theme-bg;
    .bar-title {
      height: 60px;
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      background-color: $theme-bg;
      border-bottom: 1px solid $theme-border;
      color: $theme-color;
      font-size: 20px;
      z-index: 1001;
    }
    .el-dialog {
      &.el-dialog--small {
        box-shadow: 0 0 10px #999;
      }
    }
    .bar-footer {
      position: fixed;
      bottom: 0;
      width: 200px;
      height: 60px;
      border-top: 1px solid $theme-border;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1001;
      background-color: $theme-bg;
      font-size: 16px;
      color: $theme-color;
      span {
        cursor: pointer;
      }
      i {
        margin-left: 10px;
        cursor: pointer;
      }
    }
    /*
    .el-menu-item-group__title {
      padding-top: 20px;
      padding-bottom: 4px;
    }
    .el-dialog {
      .el-dialog__body {
        padding: 10px 12px;
      }
      .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      i {
        margin-right: 10px;
      }
      &.is-active {
        background-color: $theme-bg-hover;
      }
    }
    */
  }
</style>
